<template>
	<a-menu style="width: 100%; border: none;" mode="vertical">
		<a-menu-item v-for="item in navs" :key="item.name" @click="pushRouterHandler(item)"
			:class="{ 'ant-menu-item-selected': item.focus }">
			{{ item.title }}
		</a-menu-item>
	</a-menu>
</template>

<script lang="ts" setup>
import { list } from '@/router/index'
import router from '@/router/index'
import { ref } from 'vue'

const navs = ref(list)

interface INavs {
	path: string,
	name: string,
	component: '',
	title: string,
	focus: boolean,
}
const pushRouterHandler = (info: INavs) => {
	router.push({ name: info.name })
	list?.forEach(item => item.focus = false)
	info.focus = true
}



</script>

<style lang="scss">
@import '@/styles/config.scss';

.ant-menu {
	background-color: $containerColor;
}

.ant-menu-item {
	background-color: $containerColor;
}

.ant-menu-item-selected {
	background-color: #333333 !important;
	color: #D2D2D2;
	font-weight: 900;
}

.ant-menu-item-active {
	background-color: #333333;
}

.ant-menu-title-content {
	color: #C2C2C2;
}
</style>